/**
 * 内容脚本：与网页交互，提取导航链接
 * 实现自动提取和选择性提取两种模式
 * 与扩展的后台脚本和弹出界面通信
 */
import { logger } from './utils/logger';
import { LinkExtractor, NavigationLink } from './utils/linkExtractor';
import { ElementSelector } from './utils/elementSelector';
import { renderReactComponent, unmountReactComponent } from './utils/reactRenderer';
import Panel from './components/Panel';
// 导入面板样式
import './components/Panel/styles.css';

// 元素选择器实例
let selector: ElementSelector | null = null;

// 面板是否已显示
let isPanelShown: boolean = false;

/**
 * 显示面板并渲染React组件
 * @param links 要显示的链接数组
 */
function showPanel(links: NavigationLink[]): void {
  if (isPanelShown) {
    logger.debug("面板已经在显示中");
    return;
  }
  
  logger.info("显示导航链接面板");
  
  // 使用React渲染面板
  renderReactComponent(Panel, {
    links,
    onClose: () => hidePanel(),
    onExtractAllLinks: () => {
      logger.info("从面板触发：提取所有链接");
      const newLinks = LinkExtractor.extractNavigationLinks();
      
      // 重新渲染面板
      hidePanel();
      showPanel(newLinks);
      
      // 通知后台脚本
      try {
        browser.runtime.sendMessage({
          action: 'linksUpdated',
          data: { linkCount: newLinks.length }
        });
      } catch (e) {
        logger.debug("发送消息到后台脚本失败", e);
      }
    },
    onSelectAreaLinks: () => {
      logger.info("从面板触发：选择区域获取链接");
      
      // 先隐藏面板
      hidePanel();
      
      // 启动选择器
      startElementSelector((response) => {
        if (response && response.success && response.links) {
          // 选择完成后会自动显示面板，这部分逻辑在startElementSelector中已处理
          logger.debug("选择区域获取链接完成", { linkCount: response.links.length });
        }
      });
    }
  });
  
  isPanelShown = true;
  
  // 通知后台脚本
  try {
    browser.runtime.sendMessage({
      action: 'panelShown',
      data: { linkCount: links.length }
    });
  } catch (e) {
    logger.debug("发送消息到后台脚本失败", e);
  }
}

/**
 * 隐藏面板
 */
function hidePanel(): void {
  if (!isPanelShown) {
    logger.debug("面板未显示");
    return;
  }
  
  logger.info("隐藏导航链接面板");
  
  // 卸载React组件
  unmountReactComponent();
  
  isPanelShown = false;
  
  // 通知后台脚本
  try {
    browser.runtime.sendMessage({
      action: 'panelClosed'
    });
  } catch (e) {
    logger.debug("发送消息到后台脚本失败", e);
  }
}

export default defineContentScript({
  matches: ['<all_urls>'],
  
  // 加载顺序
  runAt: 'document_idle',
  
  /**
   * 主函数：注册消息处理程序
   */
  main() {
    logger.info("内容脚本已加载");
    
    // 监听来自扩展的消息
    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
      logger.debug("收到消息", message);
      
      switch (message.action) {
        // 自动提取链接
        case 'extractNavLinks':
          logger.info("执行自动提取导航链接");
          const links = LinkExtractor.extractNavigationLinks();
          sendResponse({ success: true, links });
          break;
          
        // 进入选择模式
        case 'startElementSelector':
          logger.info("启动元素选择器");
          startElementSelector(sendResponse);
          return true; // 保持消息通道开放
          
        // 退出选择模式
        case 'stopElementSelector':
          logger.info("停止元素选择器");
          stopElementSelector();
          sendResponse({ success: true });
          break;
          
        // 打开面板
        case 'openPanel':
          logger.info("打开导航链接面板");
          const extractedLinks = LinkExtractor.extractNavigationLinks();
          showPanel(extractedLinks);
          sendResponse({ 
            success: true, 
            panelCreated: true, 
            linkCount: extractedLinks.length 
          });
          break;
          
        // 关闭面板
        case 'closePanel':
          logger.info("关闭导航链接面板");
          hidePanel();
          sendResponse({ success: true });
          break;
          
        default:
          logger.debug("未知消息动作", message.action);
          sendResponse({ success: false, error: 'Unknown action' });
      }
    });
    
    logger.info("消息监听器已注册");
  }
});

/**
 * 启动元素选择器
 * @param sendResponse 响应回调函数
 */
function startElementSelector(sendResponse: (response: any) => void): void {
  if (selector) {
    // 如果选择器已存在，先停止它
    stopElementSelector();
  }
  
  // 创建新的选择器实例
  selector = new ElementSelector((links: NavigationLink[]) => {
    // 选择完成后的回调
    logger.info("元素选择完成，提取的链接数量：", links.length);
    
    // 显示面板
    showPanel(links);
    
    // 发送选择结果
    sendResponse({ success: true, links });
    
    // 元素选择器在其内部会自行禁用
  });
  
  // 激活选择器
  selector.enable();
}

/**
 * 停止元素选择器
 */
function stopElementSelector(): void {
  if (selector) {
    selector.disable();
    selector = null;
  }
}
